<!--
 * @Author: chenjiao
 * @Date: 2021-06-30 15:34:08
 * @LastEditTime: 2021-10-08 14:44:20
 * @LastEditors: Please set LastEditors
 * @Description: 会员档案
 * @FilePath: \ebc-admin\src\views\member\MemberInfo\MemberProflie.vue
-->
<template>
  <div class="main">
      <div class="table">
        <el-tabs v-model="activeName"   @tab-click="handleClick">
          <el-tab-pane 
          v-for="(item , index) in tabList"
          :key=index
          :label="item.label"
          :name="item.name"
          />
        </el-tabs>
        <!-- 显示组件 -->
          <record-file v-if="activeName == 'recordFile'" :memberId="memberId"   />
          <buyer-label v-if="activeName == 'buyerLabel'" :memberId="memberId"  />
          <level-info  v-if="activeName == 'levelInfo'" :memberId="memberId" />
      </div> 
      <div class="back">
         <el-button class="btn-center" @click="goBack">返回</el-button>
      </div>
  </div>
</template>

<script>
// 组件

import BuyerLabel from './component/buyerLabel.vue'
import LevelInfo from './component/levelInfo.vue'
import RecordFile from './component/recordFile.vue'


export default {
    name:"memberProfile",
    components:{
      BuyerLabel,
      LevelInfo,
      RecordFile,
       
    },
    data(){
      return {
        // 标签页
        tabList:[
          {label:'会员档案',name:'recordFile'},
          {label:'会员标签',name:'buyerLabel'},
          {label:'等级信息',name:'levelInfo'},
        ],
        activeName:'recordFile',
        memberId:this.$route.query.memberId

      }
    },

    methods: {
      handleClick(tab) {
        // 将激活页面显示
        this.activeName = tab.name 
      },
      // 返回会员列表
      goBack(){
        this.$router.push({path:'/member/list'})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main{
    width:98%;
    height: 100vh;
    background-color: #fff;
    margin: 10px auto;
  }
  .table{
    padding-left:15px;
  }
  .back{
    height:80px;
    width:100%;
    position: fixed;
    border-top:1px solid #ddd;
    bottom:15px;
  }
  .btn-center{
    display:block;
    margin: 5px auto;
  }
</style>